<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe HLS 视频播放器</title>
    <!-- 本地引入 Video.js 样式（路径需与实际项目一致） -->
    <link rel="stylesheet" href="js/video.js/dist/video-js.min.css">
    
    <style>
        /* 清除默认样式，让视频框占满 iframe 容器 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #000; /* 黑色背景，避免视频加载前留白 */
            overflow: hidden; /* 隐藏页面滚动条 */
        }
        /* 视频播放器容器：占满整个页面 */
        #videoPlayer {
            width: 100vw !important;
            height: 100vh !important;
            object-fit: contain; /* 保持视频比例，避免拉伸 */
        }
        /* 优化 Video.js 控件样式（可选，确保控件不遮挡视频核心内容） */
        .vjs-control-bar {
            background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
            height: 40px !important;
            bottom: 0 !important;
        }
        /* 双击放大相关：Video.js 原生支持双击全屏，无需额外代码，仅优化样式 */
        .vjs-fullscreen {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 9999 !important; /* 全屏时层级最高，避免被父页面遮挡 */
        }
        /* 错误提示样式：视频加载失败时显示 */
        .error-tip {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 16px;
            text-align: center;
            z-index: 10;
        }
    </style>
</head>
<body>
    <!-- 视频播放器容器（唯一核心元素） -->
    <video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" controls></video>
    
    <!-- 错误提示容器（默认隐藏） -->
    <div class="error-tip" id="errorTip" style="display: none;"></div>

    <!-- 本地引入 Video.js 核心库和 HLS 插件（路径需与实际项目一致） -->
    <script src="js/video.js/dist/video.min.js"></script>
    <script src="./videojs-http-streaming/dist/videojs-http-streaming.min.js"></script>

    <script>
        // 初始化 Video.js 播放器（配置适配自动播放和 iframe 场景）
        const player = videojs('videoPlayer', {
            autoplay: true,        // 开启自动播放
            muted: true,           // 静音播放（规避浏览器自动播放策略限制）
            responsive: true,      // 响应式适配
            fluid: true,           // 流体布局（自适应容器尺寸）
            controls: true,        // 保留控制栏（支持双击放大、进度控制等）
            preload: 'auto',       // 预加载视频
            playbackRates: [0.5, 1, 1.5, 2], // 保留倍速播放（可选，提升体验）
            bigPlayButton: true    // 显示大播放按钮（加载失败时可手动触发）
        });

        // 获取 DOM 元素
        const errorTip = document.getElementById('errorTip');
        let hlsUrl = ''; // 存储父页面传递的 HLS 地址

        /**
         * 1. 处理父页面传参：支持两种方式（URL 参数 / postMessage）
         * - URL 参数：适合静态传参（如 iframe src="xxx.html?hls=xxx"）
         * - postMessage：适合动态传参（父页面后续更新 HLS 地址）
         */
        // 方式1：从 URL 参数获取 HLS 编码（解码 URL 特殊字符）
        function getHlsFromUrl() {
            const urlParams = new URLSearchParams(window.location.search);
            const encodedHls = urlParams.get('hls');
            if (encodedHls) {
                return decodeURIComponent(encodedHls);
            }
            return '';
        }

 
        // 方式2：监听父页面 postMessage 传参（使用*允许所有来源）
        function listenParentMessage() {
            window.addEventListener('message', (e) => {
                // 按要求使用*，不做域名校验（注意：生产环境建议指定具体域名以保证安全）
                if (e.data.type === 'setHlsUrl') {
                    hlsUrl = e.data.hlsUrl;
                    loadAndPlayVideo(); // 接收新地址后重新加载播放
                }
            }, false);
        }

        /**
         * 2. 加载并自动播放视频
         */
        function loadAndPlayVideo() {
            if (!hlsUrl) {
                showError('未获取到 HLS 视频地址，请检查父页面传参');
                return;
            }

            // 隐藏错误提示，显示加载状态
            hideError();
          

            try {
                // 设置 HLS 视频源（类型为 application/x-mpegURL）
                player.src({
                    src: hlsUrl,
                    type: 'application/x-mpegURL'
                });

                // 加载并播放（处理浏览器自动播放策略限制）
                player.load();
                player.play().then(() => {
                    console.log('HLS 视频自动播放成功');
                }).catch((err) => {
                    // 若播放失败（如浏览器阻止非静音自动播放），提示用户手动点击
                    showError(`自动播放失败，请点击播放按钮：${err.message}`);
                    console.error('自动播放异常：', err);
                });
            } catch (err) {
                showError(`视频加载失败：${err.message}`);
                console.error('视频加载异常：', err);
            }
        }

        /**
         * 3. 错误提示显示/隐藏
         */
        function showError(msg) {
            errorTip.textContent = msg;
            errorTip.style.display = 'block';
            // 隐藏加载状态
        }

        function hideError() {
            errorTip.style.display = 'none';
        }

        /**
         * 4. 保留双击放大功能（Video.js 原生支持，额外优化全屏体验）
         * - 双击视频区域自动切换全屏/退出全屏
         * - 监听全屏变化，确保控件正常显示
         */
        player.on('fullscreenchange', () => {
            if (player.isFullscreen()) {
                console.log('进入全屏模式');
                // 全屏时可隐藏其他元素（如错误提示）
                hideError();
            } else {
                console.log('退出全屏模式');
            }
        });

        /**
         * 5. 播放器错误监听（统一捕获播放异常）
         */
        player.on('error', () => {
            const error = player.error();
            let errorMsg = '未知播放错误';
            if (error) {
                errorMsg = `错误码 ${error.code}：${error.message}`;
            }
            showError(errorMsg);
            console.error('播放器错误：', error);
        });

        /**
         * 6. 页面初始化：优先从 URL 取参，若无则监听 postMessage
         */
        function init() {
            // 初始化传参获取
            hlsUrl = getHlsFromUrl();
            listenParentMessage();

            // 若 URL 已传参，直接加载播放；否则等待 postMessage 传参
            if (hlsUrl) {
                  showError('视频准备中，即将播放...'); // 显示延迟提示
                // 延迟3000毫秒（3秒）后执行播放
                setTimeout(() => {
                    loadAndPlayVideo();
                }, 3000);
            } else {
                showError('视频加载中');
            }

            // 页面关闭时清理播放器资源
            window.addEventListener('beforeunload', () => {
                player.dispose();
            });
        }

        // 启动初始化
        init();
    </script>
</body>
</html>
